<template>
  <!--setup 风格的状态-->
  <el-button type="" @click="changeName">修改</el-button>
  <br><br>
  {{ name }}<br>
  {{ dataList2 }}<br>
  <br><br>
  <el-pagination
    background
    layout="prev, pager, next"
    v-model:currentPage="pageInfo.index"
    :total="pageInfo.count">
  </el-pagination>
</template>


<script setup lang="ts">

  import { reactive, ref, watch } from 'vue'
  import {
    List
  } from '../../../lib/main'
  const props = defineProps({
    
  })

  type DataList = {
    name: string,
    age: number
  } 

  const useState = () => {

    const name = ref('我是一个字符串')

    // 可以直接赋值的数组
    const dataList2 = List([])

    // 原生数组
    const dataList = reactive([{
      name: '我是 setup',
      age: 10
    }])

    // 分页信息
    const pageInfo = reactive({
      index: 1,
      count: 30
    })

    const load = () => {
      const index = pageInfo.index
      // 加载数据
      dataList2.$state = [{
        name: '我是 setup',
        age: 10 + index
      }]
    }

    watch(() => pageInfo.index, () => {
      // 根据分页信息获取数据
      load()
    })

    return {
      name,
      dataList,
      dataList2,
      pageInfo,
      load
    }

  }

  const state = useState()

  console.log('state:', state)

  const {
    pageInfo,
    name,
    dataList2
  } = state

  const changeName = () => {
    state.name.value = '改了'
  }

</script>